<template>
  <div class="user-dashboard">
  <div class="board">
    <div class="dashboard-header">
      <h2 class="dashboard-title">用户主界面</h2>
    </div>
    <div class="user-info-container">
      <div class="user-info-item">
        <label class="info-label">用户名:</label>
        <span class="info-value">{{ userInfo.username }}</span>
      </div>
      <div class="user-info-item">
        <label class="info-label">等级:</label>
        <span class="info-value">{{ userInfo.level }}</span>
      </div>
      <div class="user-info-item">
        <label class="info-label">经验值:</label>
        <span class="info-value">{{ userInfo.experience }}</span>
      </div>
    </div>
    <div class="dashboard-action-container">
      <button class="dashboard-button" @click="completeDailyTask">签到</button>
    </div>
  </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      userInfo: {
        username: '示例用户',
        level: 1,
        experience: 0,
      },
      experiencePerTask: 10, // 假设每个每日任务提供10点经验值
      levelUpThreshold: 100, // 每100经验值提升一级
    };
  },
  methods: {
    completeDailyTask() {
      this.userInfo.experience += this.experiencePerTask;
      if (this.userInfo.experience >= this.levelUpThreshold) {
        this.userInfo.level++;
        this.userInfo.experience -=  this.levelUpThreshold;
        alert('恭喜你升级了！');
      }
    },
  },
};
</script>

<style scoped>
/* 设置全局背景图片 */
.user-dashboard {

    /* 设置背景图片 */
    background-image: url('@/assets/img.png');
    /* 设置背景图片的其他属性 */
    background-size: cover; /* 图片覆盖整个容器 */
    background-position: center; /* 图片居中显示 */
    background-repeat: no-repeat; /* 图片不重复 */
    /* 其他样式 */
    height: 100vh; /* 假设你想要背景图片覆盖整个视口高度 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;

}

/* 用户主界面样式 */
.board {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50vh;
  padding: 20px;
  box-sizing: border-box;

  /* 添加白色背景 */
  background-color: #fff;

  /* 设置边框为1px宽，并保持颜色为#ccc */
  border: 1px solid #ccc;
  /* 添加阴影效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* 头部样式 */
.dashboard-header {
  text-align: center;
}

.dashboard-title {
  margin: 0;
  font-size: 2rem;
  color: #333; /* 深灰色标题 */
}

/* 用户信息容器样式 */
.user-info-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  max-width: 600px;
  margin: 20px 0;
}

/* 用户信息项样式 */
.user-info-item {
  flex: 1 1 200px;
  margin-bottom: 15px;
  text-align: left;
  background-color: #fff; /* 白色背景 */
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* 阴影效果 */
}

.info-label {
  font-weight: bold;
  color: #666; /* 中灰色标签 */
}

.info-value {
  font-weight: normal;
  color: #333; /* 深灰色值 */
}

/* 动作容器样式 */
.dashboard-action-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 按钮样式 */
.dashboard-button {
  padding: 10px 20px;
  background-color: #007bff; /* 蓝色背景 */
  color: #fff; /* 白色文本 */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* 背景色过渡效果 */
}

.dashboard-button:hover {
  background-color: #0056b3; /* 鼠标悬停时改变按钮背景色 */
}

/* 响应式布局调整 */
@media (max-width: 600px) {
  .user-info-item {
    flex: 1 1 100%; /* 小屏幕上每行一个item */
  }
}
</style>